<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="description" content="PlayerX">
    <meta name="viewport" content="width=device-width, user-scalable=yes, initial-scale=1, maximum-scale=1">
    <meta name="mobile-web-app-capable" content="yes">
    <meta id="theme-color" name="theme-color" content="#ffffff">
    <base target="_blank">
    <script src="./jquery.min.js"></script>
</head>

<body>
    <div class="videocontainer">
        <br>mrtc://118.178.135.125:8188/AAAAA/pgm<br> publish url: <input type="text" id="pushurl" />
        <div id="localVideo" style="overflow:auto;"></div>
    </div>
    <button id="publishScreen">publishScreen</button>
    <button id="previewCamera">previewCamera</button>
    <button id="publishCamera">publishCamera</button>
    <button id="unpublish">unpublish</button>
    <button id="Mute1">mute</button>
    <br> location:0左上角1左下角2右下角3右上角
    <input type="text" id="location" />
    <br> scale:screen的宽乘scale是视频的宽度
    <input type="text" id="scale" />
    <button id="publishScreenAndCamera">publishScreamAndCamera</button>
    <button id="mobileSwitchCamera">mobileSwitchCamera</button>
    <script src="//static.mudu.tv/static/mrtc-web-sdk/latest/mrtc-web-sdk.js"></script>
    <script type="text/javascript">
        var localVideo = document.getElementById('localVideo');

        var publish = Mrtc.setup(localVideo, {
            successCallback:function () {
                console.log('转rtmp嘛 ')
            },
            codec:'vp8'
        });

        // Mrtc.detectExtensions(()=>{
        //     console.log('success' )
        // },
        //     (val)=>{
        //         console.log('error')
        //     })


        publish.subscribe('on', function (val) {
            console.log('on', val)
        })
        publish.subscribe('out', function (val) {
            console.log('out', val)
        })
        $('#publishScreen').click(function() {
            var publishurl = $("#pushurl").val();
            publish.publishScreen(publishurl,{resolution:3000});
        });
        $('#previewCamera').click(function() {
            var publishurl = $("#pushurl").val();
            publish.previewCamera();
        });
        $('#publishCamera').click(function() {
            var publishurl = $("#pushurl").val();
            publish.publishCamera(publishurl, {resolution:3000});
        });
        $('#publishScreenAndCamera').click(function() {
            var publishurl = $("#pushurl").val();
            var location = parseInt($("#location").val());
            var scale = parseFloat($("#scale").val());
            publish.publishScreenAndCamera(publishurl, {
                location: location,
                scale: scale
            });
        });
        $('#mobileSwitchCamera').click(function() {
            var publishurl = $("#pushurl").val();
            publish.switchCamera(publishurl);
        });

        $('#unpublish').click(function() {
            publish.unpublish(function() {
                console.log("logout@@@@@@@@@");
            });
        });
        $('#Mute1').click(function() {
            publish.togglePublishMute();
        });

        window.addEventListener('message',(val)=>{
            console.log('message',val)
        })
    </script>
</body>

</html>